.container {
  background-color: rgb(245, 245, 245);
  padding-top: 135rpx;
}

.divider {
  // margin: 0 auto;
  // border-top: 8rpx solid #fff;
  // border-bottom: 8rpx solid #fff;
  // width: 94%;
  height: 20rpx;
}

.navScroll {
  display: flex;
  height: 80rpx;
  background-color: #fff;
}

.navScroll .navItem {
  height: 80rpx;
  padding: 0 20rpx;
  white-space: nowrap;
}

.navScroll .navItem text {
  display: block;
  line-height: 66rpx;
  box-sizing: border-box;
  border-bottom: 4rpx solid transparent;
  transition: border-color 400ms;
  font-weight: bold;
}

.navScroll .navItem.active text {
  border-color: #d43c33;
}

.videoList {
  /*
    height = 屏幕100%高度 - 自定义navBar高度 - header高度 - 分类器高度 - videoList的padding
  */
  height: calc(100vh - 290rpx - 80rpx - 10rpx);
  padding-bottom: 120rpx;

  .item {
    padding: 10rpx 25rpx;
    background-color: #fff;
    border-radius: 15rpx;

    .title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      padding-bottom: 10rpx;
      height: 50rpx;
      line-height: 50rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: bold;
    }

    .img-warpper {
      position: relative;
      font-size: 0;

      image,
      video {
        //为了让视频的宽高比例保持在1920*1080的等比上。宽度占满减去容器padding，高度为宽度*0.5625
        width: calc(100vw - 50rpx);
        height: calc((100vw - 50rpx) * 0.5625);
        border-radius: 15rpx;
      }
      .image-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #ffffff55;

        .iconfont {
          font-size: 80rpx;
          transition: color 200ms;
        }

        .play-count {
          font-size: 24rpx;
          text-shadow: 0 0 2px #00000033;
        }
      }

      &:active {
        .image-label {
          color: #ffffffaa;
        }
      }
    }

    .desc {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-top: 15rpx;
      font-size: 22rpx;
      line-height: 1.7;
      color: rgb(110, 110, 110);
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 10rpx;
    }

    .creator {
      display: flex;
      align-items: center;

      image.creator-img {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
      }

      .nickname {
        font-size: 24rpx;
        padding-left: 25rpx;
      }
    }

    .actions {
      display: flex;
      justify-content: space-evenly;
      width: 400rpx;

      .icon {
        display: flex;
        flex-direction: column;
        align-items: center;

        button.iconfont {
          width: auto;
          height: auto;
          margin: 0;
          padding: 0;
          background-color: transparent;
          font-size: 40rpx;
          line-height: 40rpx;
          text-align: center;
          color: #333;
          font-weight: normal;

          &:active {
            color: inherit;
          }
        }

        .count {
          font-size: 16rpx;
          color: rgb(123, 123, 123);
        }
      }
    }
  }
}
